<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户注册</title>
  <!-- 引入 Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入自定义 CSS -->
  <link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body>
<div class="container">
  <h1>用户注册</h1>
  <form th:action="@{/register}" th:object="${user}" method="post">
    <!-- 姓名 -->
    <div class="form-group">
      <label for="fullName">姓名：</label>
      <input type="text" class="form-control" id="fullName" th:field="*{fullName}" required>
      <div class="error-message" th:if="${#fields.hasErrors('fullName')}" th:errors="*{fullName}"></div>
    </div>

    <!-- 邮箱 -->
    <div class="form-group">
      <label for="email">邮箱：</label>
      <input type="email" class="form-control" id="email" th:field="*{email}" required>
      <div class="error-message" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></div>
    </div>

    <!-- 密码 -->
    <div class="form-group">
      <label for="password">密码：</label>
      <input type="password" class="form-control" id="password" th:field="*{password}" required>
      <div class="error-message" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></div>
    </div>

    <!-- 生日 -->
    <div class="form-group">
      <label for="birthday">生日：</label>
      <input type="date" class="form-control" id="birthday" th:field="*{birthday}" required>
      <div class="error-message" th:if="${#fields.hasErrors('birthday')}" th:errors="*{birthday}"></div>
    </div>

    <!-- 性别 -->
    <div class="form-group">
      <label>性别：</label>
      <div>
        <input type="radio" id="male" th:field="*{gender}" value="Male" required>
        <label for="male">男</label>
        <input type="radio" id="female" th:field="*{gender}" value="Female" required>
        <label for="female">女</label>
      </div>
      <div class="error-message" th:if="${#fields.hasErrors('gender')}" th:errors="*{gender}"></div>
    </div>

    <!-- 职业 -->
    <div class="form-group">
      <label for="profession">职业：</label>
      <input type="text" class="form-control" id="profession" th:field="*{profession}" required>
      <div class="error-message" th:if="${#fields.hasErrors('profession')}" th:errors="*{profession}"></div>
    </div>

    <!-- 已婚 -->
    <div class="form-group">
      <label for="married">已婚：</label>
      <input type="checkbox" id="married" th:field="*{married}">
    </div>

    <!-- 备注 -->
    <div class="form-group">
      <label for="note">备注：</label>
      <textarea class="form-control" id="note" th:field="*{note}"></textarea>
      <div class="error-message" th:if="${#fields.hasErrors('note')}" th:errors="*{note}"></div>
    </div>

    <!-- 提交按钮 -->
    <button type="submit" class="btn btn-primary">注册</button>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>